<template>
  <div>
    <van-search v-model="value" placeholder="快乐过家家" background="#fafafa" @click="go" />
    <ul>
      <!-- 左侧导航区 -->
      <li v-for="(v, index) in str" :key="index" v-html="v.title" @click="fun(index)"
        :class="myIndex == index ? myClick : null"></li>
      <!-- 右侧展示区 -->
      <div class="content">
        <div class="list" v-for="(v, index) in str" :key="index">
          <img :src="v.url" alt="" />
          <span v-html="v.text"></span>
        </div>
      </div>
    </ul>
  </div>
</template>

<script>
import "vant/lib/index.css";
import Vue from "vue";
import { Search } from "vant";
Vue.use(Search);
export default {
  data() {
    return {
      str: "",
      value: "",
      myClick: "click",
      myIndex: 0,
    };
  },
  methods: {
    fun(index) {
      this.myIndex = index;
      if (index == 0) {
        this.$http({
          url: "http://localhost:3000/IconGoods",
          method: "GET",
        }).then((res) => {
          this.str = res.data;
        });
      } else if (index == 1) {
        this.$http({
          url: "http://localhost:3000/jingxuan",
          method: "GET",
        }).then((res) => {
          this.str = res.data;
        });
      } else if (index == 2) {
        this.$http({
          url: "http://localhost:3000/nanzhuang",
          method: "GET",
        }).then((res) => {
          this.str = res.data;
        });
      } else if (index == 3) {
        this.$http({
          url: "http://localhost:3000/neiyi",
          method: "GET",
        }).then((res) => {
          this.str = res.data;
        });
      } else if (index == 4) {
        this.$http({
          url: "http://localhost:3000/xiebao",
          method: "GET",
        }).then((res) => {
          this.str = res.data;
        });
      } else if (index == 5) {
        this.$http({
          url: "http://localhost:3000/muying",
          method: "GET",
        }).then((res) => {
          this.str = res.data;
        });
      } else if (index == 6) {
        this.$http({
          url: "http://localhost:3000/yundong",
          method: "GET",
        }).then((res) => {
          this.str = res.data;
        });
      } else if (index == 7) {
        this.$http({
          url: "http://localhost:3000/meizhuang",
          method: "GET",
        }).then((res) => {
          this.str = res.data;
        });
      } else if (index == 8) {
        this.$http({
          url: "http://localhost:3000/peishi",
          method: "GET",
        }).then((res) => {
          this.str = res.data;
        });
      } else if (index == 9) {
        this.$http({
          url: "http://localhost:3000/jiadian",
          method: "GET",
        }).then((res) => {
          this.str = res.data;
        });
      } else if (index == 10) {
        this.$http({
          url: "http://localhost:3000/jiaju",
          method: "GET",
        }).then((res) => {
          this.str = res.data;
        });
      } else if (index == 11) {
        this.$http({
          url: "http://localhost:3000/jiazhaung",
          method: "GET",
        }).then((res) => {
          this.str = res.data;
        });
      }
    },
    go() {
      this.$router.push("/home");
    },
  },
  mounted() {
    this.$http({
      url: "http://localhost:3000/IconGoods",
      method: "GET",
    }).then((res) => {
      this.str = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
$color: #f03867;

ul {
  position: relative;
}

.content {
  position: absolute;
  width: calc(100% - 93px);
  right: 0;
  top: 0;
}

li {
  width: 93px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fafafa;
  color: #585c64;
  font-size: 14px;
  position: relative;
}

.click {
  background: #fff;
  color: #222;
}

.click::after {
  content: "";
  display: block;
  width: 4px;
  height: 48px;
  background: $color;
  position: absolute;
  left: 0;
}

.content {
  display: flex;
  flex-wrap: wrap;
}

.list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33%;
  color: #222;
  font-size: 12px;
}

.list img {
  width: 66px;
}

.list span {
  margin: 5px 0;
}
</style>
